<template>
  <div>
    <div class="layout-bg" ref="big_bg">
      <div ref="bg_text" class="text">
        <img src="@/assets/images/huizhang.png" alt="" />
        <div>
          <div class="dev-text">江山市投资项目全周期管理 "e键通" 系统</div>
          <div class="bot-text">
            <i
              >Full-cycle management ofinvestment projects in jiangshan City
            </i>
            <span>衢州当龙头、全省争上游</span>
          </div>
        </div>
      </div>
    </div>
    <div class="header">
      <div class="left">
        <div class="logo"></div>
        <div class="name">江山市投资项目全周期管理 "e键通" 系统</div>
      </div>
      <div class="right">
        <div class="oldSystem" @click="JumpOldSystem">
          <span class="icon-xiangmu_xiangmuguanli icon"></span>
          <span>旧版本</span>
        </div>
        <div class="work" @click="JumpJiangShan">
          <span class="icon-diannao icon"></span>
          <span>业务平台</span>
        </div>
        <div class="user">
          <el-dropdown>
            <span class="el-dropdown-link">
              <span class="icon-yonghu icon" style="color: #fff"></span>
              <span style="color: #fff">{{ userName }}</span>
              <i class="icon-xiala" style="color: #fff"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="loginOut"
                >退出登录</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
          <!-- <span
            @click="(showOutLogin) => (OutLoginShow = !OutLoginShow)"
            class="icon-xiala"
            style="margin-left: 10px"
          ></span>
          <div class="loginOut" v-show="OutLoginShow" @click="loginOut">
            退出登录
          </div> -->
        </div>
      </div>
    </div>
    <div class="Tab">
      <div class="left">
        <div class="tab">
          <div class="top">
            <div
              @click="switchingData(item)"
              v-for="item in TabData"
              :key="item.id"
              :class="routName == item.name ? 'active' : ''"
            >
              {{ item.name }}
            </div>
            <div
              v-if="TabData_1.length > 1"
              @click="TabData_1Show = !TabData_1Show"
              :class="
                TabData_1Show == true
                  ? 'icon-zhankai'
                  : 'icon-zhankai icon-shouhui'
              "
            ></div>
            <div class="topMore" v-show="TabData_1Show">
              <div
                v-for="item in TabData_1"
                :key="item.id"
                @click="switchingData(item)"
                :class="routName == item.name ? 'active' : ''"
              >
                {{ item.name }}
              </div>
            </div>
          </div>
          <div class="bottom">
            <div
              v-for="item in TabData2"
              :key="item.id"
              :class="routName1 == item.name ? 'active' : ''"
              @click="switchingDepartments(item)"
            >
              {{ item.name }}{{ item.value }}
            </div>
            <div
              v-if="TabData2_1.length > 1"
              @click="TabData2_1Show = !TabData2_1Show"
              :class="
                TabData2_1Show == true
                  ? 'icon-zhankai'
                  : 'icon-zhankai icon-shouhui'
              "
            ></div>
            <transition name="fade">
              <div class="bottomMore" v-show="TabData2_1Show">
                <div
                  v-for="item in TabData2_1"
                  :key="item.id"
                  @click="switchingDepartments(item)"
                  :class="routName1 == item.name ? 'active' : ''"
                >
                  {{ item.name }}
                </div>
              </div>
            </transition>
          </div>
        </div>
        <div class="left-b">
          <div class="title">
            <u>全市</u> {{ curYear }} <u>市建设计划</u>项目库
          </div>
          <div class="content">
            <div class="all">
              <div v-for="item in all_data" :key="item.index">
                <span>{{ item.name }}：</span>
                <div class="b_blue" @click="jumpToJiangshan(item)">
                  {{ item.value }}<span>{{ item.unit }}</span>
                </div>
              </div>
            </div>
            <div class="details">
              <div v-for="item in details_data" :key="item.index">
                <span>{{ item.name }}：</span>
                <div class="b_blue" @click="jumpToJiangshan(item)">
                  {{ item.value }}<span>{{ item.unit }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right" v-if="isItAUnit">
        <div class="top">
          <div class="top-1"></div>
          <div class="top-2">
            <div>
              <span class="current"></span>
              <div class="word">{{ routName1 }}</div>
            </div>
            <div class="title">项目推进绩效</div>
            <div>{{ topData.detail }}</div>
          </div>
          <div class="top-3">
            <div>
              <span class="word">总得分</span>
              <span class="number">{{ topData.score }}分</span>
            </div>
            <div>
              <span class="word">排名</span>
              <span class="number">{{ topData.ranking }}</span>
            </div>
          </div>
          <p>
            <span class="fff">较上月</span>
            <span class="lv">{{ topData.orderNum }}{{ topData.upflag }}</span>
            <span class="lv"></span>
          </p>
          <div class="top-4">
            <div class="word">过程管理</div>
            <div class="current">?</div>
            <div class="jia">+</div>
            <div class="word">项目绩效</div>
            <div class="current">?</div>
            <div
              :class="
                isshow == true ? 'icon-zhankai' : 'icon-zhankai icon-shouhui'
              "
              @click="unfold"
            ></div>
          </div>
          <transition name="fade">
            <div class="top-5" v-show="isshow">
              <!-- <div class="title">
                <div class="word">过程管理</div>
                <div class="current">?</div>
                <div class="icon-zhankai" @click="unfold"></div>
              </div> -->
              <div class="content">
                <div class="con">
                  <div class="smallBox">
                    <div class="circle"></div>
                    <div class="text">工作效率</div>
                    <div class="number">{{ topData.scoreWork }} 分</div>
                  </div>
                  <div class="description">
                    (未按时上报数据{{ topData.winWork }}次)
                  </div>
                </div>
                <div class="con2 con">
                  <div class="smallBox">
                    <div class="circle"></div>
                    <div class="text">计划编排</div>
                    <div class="number">{{ topData.winPlan }}分</div>
                  </div>
                  <div class="description">
                    (年度计划投资占比{{ topData.scoreEnter }}%)
                  </div>
                </div>
              </div>
              <div class="title" style="margin-top: 20px">
                <div class="word">项目绩效</div>
                <div class="current">?</div>
              </div>
              <div class="content">
                <div class="con">
                  <div class="smallBox">
                    <div class="circle"></div>
                    <div class="text">开工入库</div>
                    <div class="number">{{ topData.newEnter }}分</div>
                  </div>
                  <div class="description">
                    (新建项目数{{ topData.newEnter }}个、新开工项目数{{
                      topData.newStartEnter
                    }}个、新建项目开工率{{ topData.newStartRate }})
                  </div>
                </div>
                <div class="con2 con">
                  <div class="smallBox">
                    <div class="circle"></div>
                    <div class="text">节点预警</div>
                    <div class="number">{{ topData.scoreNote }}分</div>
                  </div>
                  <div class="description">
                    (预警项目个数{{ topData.alarmNote }}个、预警率{{
                      topData.alarmRate
                    }})
                  </div>
                </div>
                <div class="con3 con">
                  <div class="smallBox">
                    <div class="circle"></div>
                    <div class="text">投资执行</div>
                    <div class="number">{{ topData.scoreInvest }}分</div>
                  </div>
                  <div class="description">
                    (年度计划投资{{ topData.investPlan }}亿元，完成投资{{
                      topData.investComplete
                    }}亿元，年度投资完成率{{ topData.investRate }})
                  </div>
                </div>
              </div>
            </div>
          </transition>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import {
  GetCurrentYear,
  GetitemList,
  GetDeptDataTotal,
  GetDataTotal,
  GetBuildTotal,
  GetProgressTotal
} from '@/api/index.js';
import axios from 'axios';
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      isshow: false,
      routName: '全部',
      routName1: '全市',
      curYear: '',
      curMonth: '',
      all_data: [],
      TabData_1: [],
      TabData_1Show: false,
      details_data: [],
      TabData: [],
      TabData2: [],
      TabData2_1: [],
      TabData2_1Show: false,
      topData: {},
      userName: '',
      OutLoginShow: false,
      deptid_c: '0',
      jumpToJiangshanId: '',
      isItAUnit: false
    };
  },
  //监听属性 类似于data概念
  computed: {
    monitoringItems() {
      let data = {
        itemTypeId: this.$store.state.itemTypeId,
        deptid: this.$store.state.deptid,
        departmentSwitching: this.$store.state.departmentSwitching,
        curryear: this.$store.state.curryear
      };
      return data;
    }
  },
  //监控data中的数据变化
  watch: {
    monitoringItems: {
      handler(newVal, oldVal) {
        if (oldVal !== undefined) {
          this.GetDataTotal(newVal.itemTypeId, newVal.deptid);
          this.GetProgressTotal(this.curYear, newVal.deptid);
        }
      },
      immediate: true
    }
  },
  //方法集合
  methods: {
    //跳转江山
    JumpJiangShan() {
      let url = '/index.html';
      window.location = url;
    },
    //跳转旧版本
    JumpOldSystem() {
      window.location = '/Default.html';
    },
    //退出登录
    loginOut() {
      let url = '/login.aspx';
      window.location = url;
    },
    //携带参数跳转江山旧系统
    jumpToJiangshan(item) {
      if (item.name == '续建' || item.name == '新建' || item.name == '项目数') {
        let copyUrl = item.url.replace(/0/, this.curYear);
        copyUrl = copyUrl.replace(/month/, this.curMonth);
        if (this.jumpToJiangshanId) {
          copyUrl = copyUrl.replace('t=1', `t=${this.jumpToJiangshanId}`);
        }
        const href = `${copyUrl}`;
        window.location = href;
      }
    },
    unfold() {
      this.isshow = !this.isshow;
    },
    getData() {
      GetCurrentYear().then((res) => {
        this.curYear = res.data.data.curYear;
        this.$store.commit('changeCurryears', this.curYear);
        this.curMonth = res.data.data.curMonth;
      });
      GetitemList().then((res) => {
        if (res.data.data) {
          this.TabData = res.data.data;
          this.TabData = res.data.data.slice(0, 7);
          if (res.data.data.length > 7) {
            let length1 = res.data.data.length - 7;
            this.TabData_1 = res.data.data.slice(length1);
          }
        }
      });
    },
    getDeptDataTotal() {
      return GetDeptDataTotal({
        curYear: this.curYear,
        deptid: this.deptid_c
      }).then((res) => {
        if (res.data.data) {
          this.TabData2 = res.data.data;
          //假设是城建局进来数组中只有一个 管理员进来就是有n个
          if (res.data.data.length > 1) {
            this.TabData2 = res.data.data.slice(0, 15);
            if (res.data.data.length > 15) {
              this.TabData2_1 = res.data.data.slice(-33);
            }
          }
        }
      });
    },
    //项目进展绩效数据
    GetProgressTotal(curryear, deptid) {
      GetProgressTotal({ curryear: curryear, deptid: deptid }).then((res) => {
        this.topData = res.data.data;
      });
    },
    //开竣工情况数据
    GetDataTotal(itemTypeId, deptid) {
      GetDataTotal({ itemTypeId: itemTypeId, deptid: deptid }).then((res) => {
        this.all_data = res.data.data[0];
        //降维
        this.details_data = res.data.data[1].reduce(
          (cur, pre) => pre.concat(cur),
          []
        );
      });
    },

    //头部切换数据
    switchingData(val) {
      this.routName = val.name;
      this.jumpToJiangshanId = val.id;
      this.$store.commit('changeItem', val.id);
      this.$store.commit('changeSwitching', false);
      if (this.routName1 == '全市') {
        this.isItAUnit = false;
      } else {
        this.isItAUnit = true;
      }
    },
    //切换部门
    switchingDepartments(val) {
      this.routName1 = val.name;
      this.$store.commit('changeDeptId', val.id);
      if (val.name !== '全市') {
        this.isItAUnit = true;
        this.$store.commit('changeSwitching', true);
      } else {
        this.isItAUnit = false;
        this.$store.commit('changeSwitching', false);
      }
    },
    randomInt(n) {
      if (n <= 0) return -1; // 只能输入正整数哦
      const limit = Math.pow(13, n);
      let value = Math.floor(Math.random() * limit); // 用随机数向下取整，避免多一位
      if (value < limit / 10 && value !== 0) {
        // 取一位的时候就用不到这个函数啦，不过还是要把 0 这个小朋友放行的
        return randomInt(n);
      }
      return value;
    },
    getRandomNum(n) {
      let rdmNum = '';
      for (let i = 0; i < n; i++) {
        rdmNum += Math.floor(Math.random() * 10); // [0,10)的整数
      }
      return rdmNum;
    },

    //获取用户信息
    async getUser(curryear) {
      let value = this.getRandomNum(13);
      console.log(value);
      await axios
        .get(`/Default/Default.ashx?action=user&_=${value}`)
        .then((res) => {
          if (res.data.u == '-1') {
            this.$message.error('未登录');
            window.location = '/Login.aspx';
          } else {
            console.log(res.data);
            this.userName = res.data.u;
            this.deptid_c = res.data.c;
            this.getDeptDataTotal();
          }
        });
    }
  },
  beforeCreate() {}, //生命周期 - 创建之前
  created() {
    this.getData();
    this.getUser();
    setTimeout(() => {
      this.GetProgressTotal(this.curYear, 0);
    }, 200);
  }, //生命周期 - 创建完成（可以访问当前this实例

  mounted() {
    setTimeout(() => {
      this.$refs.big_bg.style.height = '120px';
      this.$refs.bg_text.style.bottom = '10px';
    }, 2000);
    setTimeout(() => {
      this.$refs.big_bg.style.height = '0px';
    }, 4000);
  } //生命周期 - 挂载完成（可以访问DOM元素）
};
</script>

<style scoped lang="less">
@import url('@/assets/icons/iconfont.css');
@import url('@/assets/fonts/font.css');
.layout-bg {
  width: 100%;
  height: 856px;
  background: url('@/assets/images/big_bgg.jpg') center no-repeat;
  color: #fff;
  // font-weight: bold;
  position: relative;
  animation: all 2s;
  transition: all 1.2s;
  .text {
    position: absolute;
    bottom: 220px;
    left: 30%;
    display: flex;
    line-height: 40px;
    img {
      width: 70px;
      height: 70px;
      vertical-align: middle;
      margin-left: 15px;
    }
    .dev-text {
      font-size: 36px;
      font-family: devtext;
    }
    .bot-text {
      font-size: 15.2px;
      span {
        font-size: 18px;
        font-family: bottext;
      }
    }
  }
}
.header {
  height: 80px;
  line-height: 80px;
  background: url('@/assets/images/城市剪影.png') no-repeat;
  background-position-x: 65%;
  background-size: contain;
  background-color: #1391ff;
  display: flex;
  justify-content: space-between;
  .left {
    margin-left: 30px;
    display: flex;
    .logo {
      width: 59px;
      height: 53px;
      background: url('@/assets/images/logo(电脑端）.png') no-repeat;
      background-size: cover;
      margin-right: 20px;
      margin-top: 12px;
      vertical-align: middle;
    }
    .name {
      font-size: 24px;
      color: #fff;
      font-family: yousheBlack;
    }
  }
  .right {
    display: flex;
    color: #fff;
    font-size: 12px;
    .icon {
      margin-right: 10px;
      vertical-align: middle;
      font-size: 26px;
    }
    .oldSystem,
    .work,
    .user {
      margin-right: 40px;
      cursor: pointer;
      position: relative;
      .loginOut {
        width: 100%;
        background: #fff;
        height: 30px;
        position: absolute;
        top: 62px;
        z-index: 99;
        color: #000;
        text-align: center;
        line-height: 30px;
      }
    }
  }
}
.Tab {
  display: flex;
  padding: 0 10px;
  .left {
    box-shadow: 0px 9px 17px -13px #e4e4e4;
    flex: 4;
    .tab {
      width: 100%;
      color: #a9a8ad;
      font-size: 12px;
      margin-bottom: 10px;
      span {
        display: inline-block;
        height: 24px;
        line-height: 55px;
      }
      .top,
      .bottom {
        // display: flex;
        height: 36px;
        position: relative;
        > div {
          border: 1px solid #a9a8ad;
          height: 24px;
          line-height: 24px;
          padding: 0 5px;
          margin: 10px 10px 0px 0px;
          cursor: pointer;
          float: left;
          overflow: hidden;
        }
        .active {
          background-color: #008aff;
          color: #fff;
        }
        span {
          cursor: pointer;
        }
        .icon-zhankai {
          color: #008aff;
          border: 0px;
        }
        .icon-shouhui {
          transform: rotate(180deg);
        }
      }
      > .top {
        .topMore {
          position: absolute;
          background-color: #fff;
          z-index: 100;
          top: 30px;
          border: 0px;
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
          border-radius: 5px;
          display: flex;
          flex-wrap: wrap;
          height: auto;
          padding: 10px;
          > div {
            border: 1px solid #a9a8ad;
            height: 24px;
            line-height: 24px;
            margin: 0 10px 10px 0px;
            padding: 0 5px;
          }
        }
      }
      > .bottom {
        .bottomMore {
          position: absolute;
          background-color: #fff;
          z-index: 100;
          top: 30px;
          border: 0px;
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
          border-radius: 5px;
          display: flex;
          flex-wrap: wrap;
          height: auto;
          padding: 10px 10px 0px 10px;
          > div {
            border: 1px solid #a9a8ad;
            height: 24px;
            line-height: 24px;
            margin: 0 10px 10px 0px;
            padding: 0 5px;
          }
        }
      }
    }
    .left-b {
      width: 100%;
      height: 120px;
      background-color: #fff;
      position: relative;
      .title {
        font-size: 16px;
        font-weight: bold;
        margin: 10px 0 10px 20px;
        color: #000;
        padding-top: 8px;
      }
      .title::before {
        content: '';
        position: absolute;
        width: 4px;
        height: 15px;
        background-color: #008aff;
        top: 11px;
        left: 8px;
      }
      .content {
        display: flex;
        margin: 10px;
        color: #080808;
        font-weight: bold;
        margin-top: 10px;
        .all {
          margin-top: 20px;
        }
        .all,
        .details {
          display: flex;
          justify-content: space-around;
          width: 50%;
          font-size: 16px;
          div {
            font-size: 16px;
            display: flex;
            margin: 0 0 10px 0;
            .b_blue {
              display: block;
              transform: translate3d(34deg, 67deg);
              height: 25px;
              text-align: center;
              line-height: 25px;
              color: #fff;
              background-color: #0d91ff;
              padding: 0px 10px;
              margin-right: 10px;
              font-family: yousheBlack;
              cursor: pointer;
              span {
                text-align: center;
                font-size: 12px;
                font-family: yousheBlack;
              }
            }
          }
        }
        .details {
          flex-wrap: wrap;
          justify-content: space-between;
          div {
            width: 33%;
          }
        }
      }
    }
  }
  .right {
    flex: 1;
    margin-left: 16px;
    margin-top: 10px;
    box-shadow: 0px 9px 17px -13px #e4e4e4;
    .top {
      position: relative;
      .top-1 {
        height: 10px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        background-color: #a3dbfe;
      }
      .top-2 {
        line-height: 30px;
        background-color: #008aff;
        color: #fff;
        display: flex;
        justify-content: space-between;
        padding: 5px 10px;
        border-bottom: 1px solid #75e0ff;
        font-size: 12px;
        position: relative;
        .current {
          display: inline-block;
          position: absolute;
          width: 5px;
          height: 5px;
          border-radius: 50%;
          background-color: #fea300;
          top: 18px;
        }
        .word {
          margin-left: 10px;
        }
        .title {
          font-size: 16px;
          font-weight: bold;
        }
      }
      .top-3 {
        display: flex;
        justify-content: space-between;
        background-color: #008aff;
        padding: 15px 10px;
        padding-bottom: 0px;
        div {
          background-color: #4598f4;
          padding: 5px 15px;
          color: #fff;
          line-height: 15px;
          .word {
            font-size: 12px;
            margin-right: 15px;
          }
          .number {
            font-size: 16px;
          }
        }
      }
      p {
        background-color: #008aff;
        padding: 10px 10px;
        text-align: right;
        font-size: 12px;
        span {
          margin-left: 10px;
        }
        .fff {
          color: #fff;
        }
        .lv {
          color: #05eba6;
          font-weight: bold;
        }
      }
      .top-4 {
        height: 34px;
        padding: 15px 10px;
        color: #000;
        background-color: #fff;
        line-height: 22px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        .word {
          font-weight: bold;
          float: left;
          font-size: 16px;
          padding: 5px 0;
          border-bottom: 2px solid #5199e3;
        }
        .current {
          float: left;
          background-color: #f0aa3b;
          text-align: center;
          font-size: 12px;
          width: 15px;
          height: 15px;
          border-radius: 50%;
          color: #fff;
          line-height: 15px;
        }
        .jia {
          float: left;
        }
        .icon-zhankai {
          float: left;
          color: #008aff;
          cursor: pointer;
        }
        .icon-shouhui {
          float: left;
          color: #008aff;
          transform: rotate(180deg);
          cursor: pointer;
        }
        .icon-xiala {
          float: left;
          color: #008aff;
          font-size: 20px;
        }
      }
      .fade-enter-active,
      .fade-leave-active {
        transition: opacity 0.1s;
      }
      .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
        opacity: 0;
      }
      .top-5 {
        width: 94%;
        transition: 2s;
        position: absolute;
        top: 183px;
        padding: 15px 10px;
        color: #000;
        background-color: #fff;
        line-height: 22px;
        z-index: 88;
        .title {
          width: 100%;
          display: flex;
          border-bottom: 1px solid #ccc;
          position: relative;
          .word {
            font-weight: bold;
            font-size: 16px;
            padding: 5px 0;
            margin-right: 30px;
            border-bottom: 2px solid #5199e3;
          }
          .current {
            background-color: #f0aa3b;
            text-align: center;
            font-size: 12px;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            color: #fff;
            margin-top: 8px;
            line-height: 15px;
          }
        }
        .content {
          margin-top: 10px;
          background-color: rgb(247, 245, 245);
          padding: 10px 0px;
          border-radius: 5px;
          border-bottom: 6px solid rgba(71, 150, 243);
          display: flex;
          flex-direction: column;
          .con {
            width: 100%;
            .smallBox {
              height: 10%;
              width: 50%;
              display: flex;
              justify-content: space-around;
              align-items: center;
              .circle {
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background-color: rgba(71, 150, 243);
              }
              .text {
                width: 60px;
                font-size: 12px;
                padding-left: 5px;
                font-weight: bold;
              }
              .number {
                width: 75px;
                text-align: right;
                font-size: 18px;
                font-weight: bold;
                color: rgba(71, 150, 243);
              }
            }
            .description {
              font-size: 12px;
              margin-top: 5px;
              color: rgb(99, 99, 99);
              text-indent: 1em;
              width: 100%;
            }
          }
          .con2 {
            width: 100%;
            margin-top: 20px;
            .circle {
              background-color: rgba(110, 216, 180) !important;
            }
            .number {
              color: rgba(110, 216, 180) !important;
            }
          }
          .con3 {
            width: 100%;
            margin-top: 20px;
            .circle {
              background-color: rgba(204, 117, 249) !important;
            }
            .number {
              color: rgba(204, 117, 249) !important;
            }
          }
        }
      }
    }
  }
}
</style>
